<template>
  <!-- <div> -->
  <div class="s-map">
    <el-container>
      <el-header>
        <div class="s-top">
          <el-row :gutter="10">
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :span="8" style="text-align: left">
              <i class="icongongchengxiangmu iconfont local-c">工程：{{projectCounts.projectNum}}</i>
              <i class="icontakan iconfont local-c">工点：{{projectCounts.workPointNum}}</i>
              <i class="iconjiancedianguanli iconfont local-c">监测点：{{projectCounts.monitorNum}}</i>
            </el-col>
            <el-col :span="10">
              <!-- 最新预警消息 -->
              <el-carousel :interval="3000" indicator-position="outside" height="46px">
                <template v-if="tableWarnList.length>0">
                  <el-carousel-item v-for="item in tableWarnList" :key="item.id">
                    <div class="s-warning">
                      {{item.projectName}}-
                      {{item.workPointName}}-
                      {{item.monitorPointName}}-
                      {{item.monitorTypeName}}触发{{item.warningLevelName}}预警,预警数据({{item.recordValueName}})
                      <el-button type="primary" size="mini" @click="seeDetail(item)">查看</el-button>
                    </div>
                  </el-carousel-item>
                </template>
                <template v-else>

                  <p class="s-warning-not"><i class="iconyujing iconfont">没有预警信息...</i></p>
                </template>

              </el-carousel>
            </el-col>
            <el-col :span="6" >
              <i class="iconshujukanban iconfont local-c">数据监测量：{{projectCounts.monitorRecordNum}}</i>
            </el-col>
          </el-row>

        </div>
      </el-header>

      <el-main class="map-main" :class="{retract: isToggleStatus}">
        <point-map class="point-map"></point-map>
      </el-main>
      <button @click="hid" class="map-btn" :class="{mapBtn: isToggleStatus}">
        <i class="el-icon-caret-bottom" v-show="!isToggleStatus"></i>
        <i class="el-icon-caret-top"  v-show="isToggleStatus"></i>
      </button>
      <el-footer v-show="!isToggleStatus">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-carousel :interval="3000" indicator-position="outside" height="233px">
              <el-carousel-item>
                <!-- 工程行政区分布统计 -->
                <div class="grid-content s-grade">
                  <collapse-wrap title="工程行政区分布统计">
                    <div ref="chartsProvince" class="pie-charts"></div>
                  </collapse-wrap>
                </div>
              </el-carousel-item>

              <el-carousel-item>
                <!-- 工程所属行业占比统计 -->
                <div class="grid-content s-grade">
                  <collapse-wrap title="工程所属行业占比统计">
                    <div ref="chartsTrade" class="pie-charts"></div>
                  </collapse-wrap>
                </div>
              </el-carousel-item>

              <el-carousel-item>
                <!-- 工点所属类型占比统计 -->
                <div class="grid-content s-grade">
                  <collapse-wrap title="工点所属类型占比统计">
                    <div ref="chartsWorkPoint" class="pie-charts"></div>
                  </collapse-wrap>
                </div>
              </el-carousel-item>

              <el-carousel-item>
                <!-- 监测类型占比统计 -->
                <div class="grid-content s-grade">
                  <collapse-wrap title="监测类型占比统计">
                    <div ref="chartsMonitor" class="pie-charts"></div>
                  </collapse-wrap>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="16">
            <collapse-wrap title="最新数据">
              <!-- table -->
              <div class="new-data">
                <el-table :data="tableList" border height="187" stripe ref="table" @row-click="clickData">
                  <el-table-column prop="workPointName" show-overflow-tooltip label="边坡名称" min-width="200">
                  </el-table-column>
                  <el-table-column prop="pointName" show-overflow-tooltip label="监测点" min-width="180">
                  </el-table-column>
                  <el-table-column prop="monitorTypeName" show-overflow-tooltip label="监测类型" width="120">
                  </el-table-column>
                  <el-table-column prop="createTime" label="数据采集时间" width="200">
                    <template slot-scope="scope">
                      {{scope.row.createTime|formatTimer()}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="recordValueName" show-overflow-tooltip label="数据" min-width="250">
                  </el-table-column>
                  <el-table-column prop="warningLevelName" label="预警等级" width="100">
                    <template slot-scope="scope">
                      <el-button size="mini" :style="scope.row.warningLevelName | gradeColor" class="s-white">
                        {{scope.row.warningLevelName}}
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </collapse-wrap>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>

    <div class="s-right">
      <!-- 预警等级 -->
      <div class="grid-content s-grade">
        <collapse-wrap title="预警等级">
          <el-card class="grade-card" shadow="always" v-for="item in countWarn" :key="item.warningLevel"
                   :style="item.warningLevelName | gradeColor">
            <i class="el-icon-s-operation"></i><i class="grade-word">{{item.warningLevelName}}</i>
            <div class="grade-box">
              <p><span>数量：</span><span>{{item.num}}</span><span>，占比：</span><span>{{item.percent}}%</span></p>
              <el-progress :show-text="false" class="s-progress" :percentage="item.percent"></el-progress>
            </div>
          </el-card>
        </collapse-wrap>
      </div>
      <el-row :gutter="10" class="on-line">
        <el-col :span="12">
          <el-card shadow="always">
            <i class="el-icon-bangzhu"></i>
            <span>设备在线:</span>
            <span>{{onLinelist.onlineCount}}</span>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="always">
            <i class="el-icon-bangzhu"></i>
            <span> 设备离线:</span>
            <span>{{onLinelist.offlineCount}}</span>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
  <!-- </div> -->
</template>
<script>
import CollapseWrap from '@/components/collapse-wrap'
import PointMap from '@/views/monitor/work-point-map.vue'
import Format from '@/utils/format'
import {
  countWarnList,
  queryRecentList,
  cityCountList,
  listTypeCount,
  listIndustryCount,
  listMonitorTypeCount,
  deviceOnlineStatus,
  projectCount,
} from '@/services/model/project-info.js'
import {
  recordWarningList
} from '@/services/model/warning.js'
const Echarts = require('echarts')
export default {
  components: {
    CollapseWrap,
    PointMap
  },

  data () {
    return {
      isToggleStatus: false,
      onLinelist: '',
      myPieCharts: '',
      myBarCharts: '',
      formWarn: {
        page: 1,
        pageSize: 5,
        readFlag: 0
      },
      form: {
        page: 1,
        pageSize: 10
      },
      charts: '',
      countWarn: [],
      tableList: [],
      tableWarnList: [],
      projectCounts: {
        projectNum: '',
        workPointNum: '',
        monitorNum: '',
        monitorRecordNum: '',
      },
    }
  },
  filters: {
    // 时间格式化
    formatTimer (timer) {
      return Format(new Date(timer))
    },
    gradeColor (val) {
      switch (val) {
        case '正常':
          return 'background-color:#0DC26B'
        case 'I级预警':
          return 'background-color:#0073b7'
        case 'II级预警':
          return 'background-color:#f39c12'
        case 'III级预警':
          return 'background-color:#ff851b'
        case 'IV级预警':
          return 'background-color:#e43321'
        default:
          return 'background-color:#ffffff'
      }
    }
  },
  computed: {
    newDatas () {
      return this.$store.state.newDataList
    }
  },
  watch: {
    newDatas (val) {
      if (val.type === 2) { // 预警
        this.tableWarnList.unshift(val.data)
      } else { // 非预警
        this.tableList.unshift(val.data)
      }
    }
  },
  methods: {
    hid () {
      this.isToggleStatus = !this.isToggleStatus
    },
    // 获取当前的序号
    getIndex (index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    seeDetail (row) {
      this.$router.push({
        path: '/info-mgmt'
      })
    },
    // 最新数据行点击
    clickData (row) {
      this.$router.push({
        path: `/project/${row.projectId}/work-point/${row.workPointId}/monitor/${row.monitorType}?activeId=${row.pointId}`
      })
    },
    // 柱状图
    barCharts (refFlag, cityName, cityNum) {
      this.myBarCharts = Echarts.init(refFlag, null, {
        locale: 'ZH'
      })
      let option = {
        grid: {
          left: '10px',
          right: '10px',
          bottom: '0px',
          top: '20px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: cityName,
          axisLabel: {
            interval: 0,
            rotate: 60
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#800080'
                }
              }
            }
          },
          data: cityNum,
          type: 'bar',
          barWidth: '10px'
        }]
      }
      this.myBarCharts.setOption(option)
    },
    // 饼图
    pieCharts (refFlag, nameList, val, name) {
      this.myPieCharts = Echarts.init(refFlag, null, {
        locale: 'ZH'
      })
      let option = {
        title: {
          text: '',
          subtext: '',
          left: 'center',
          textStyle: {
            fontSize: '14'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: nameList
        },
        series: [{
          name: name,
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: val,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      this.myPieCharts.setOption(option)
    },
    // 预警等级占比
    async warnCountList (val) {
      let res = await countWarnList(val)
      let countWarn = res.data ? res.data : []
      let warnAllCount = countWarn.reduce((acc, current) => acc + parseInt(current.num), 0)
      if (warnAllCount === 0) {
        this.countWarn = countWarn.map((item) => {
          return {
            ...item,
            percent: 0
          } // 占比
        })
      } else {
        this.countWarn = countWarn.map((item) => {
          return {
            ...item,
            percent: parseInt(item.num / warnAllCount * 100)
          } // 占比
        })
      }
    },
    // 最新数据
    async queryList () {
      let reqData = { projectId: '', pageSize: this.form.pageSize }
      let res = await queryRecentList(reqData)
      this.tableList = res.data ? res.data : []
    },
    // 行政区分布统计
    async ecityCount () {
      let res = await cityCountList()
      let list = res.data ? res.data : []
      let cityName = list.map(x => x.cityName)
      let cityNum = list.map(x => x.num)
      this.barCharts(this.$refs.chartsProvince, cityName, cityNum)
    },
    // 工点所属类型占比统计
    async listTypePoint () {
      let res = await listTypeCount()
      let list = res.data ? res.data : []
      let nameList = list.map(x => x.bianpiTypeName)
      let val = list.map(x => {
        return {
          value: x.num,
          name: x.bianpiTypeName,
        }
      })
      this.pieCharts(this.$refs.chartsWorkPoint, nameList, val, '工点所属类型占比统计')
    },
    // 工程所属行业占比统计
    async listIndustry () {
      let res = await listIndustryCount()
      let list = res.data ? res.data : []
      let nameList = list.map(x => x.industryName)
      let val = list.map(x => {
        return {
          value: x.num,
          name: x.industryName,
        }
      })
      this.pieCharts(this.$refs.chartsTrade, nameList, val, '工程所属行业占比统计')
    },
    // 监测类型占比统计
    async listMonitorType () {
      let res = await listMonitorTypeCount()
      let list = res.data ? res.data : []
      let nameList = list.map(x => x.monitorTypeName)
      let val = list.map(x => {
        return {
          value: x.num,
          name: x.monitorTypeName,
        }
      })
      this.pieCharts(this.$refs.chartsMonitor, nameList, val, '监测类型占比统计')
    },
    // echart随着窗口改变
    echartResize () {
      if(this.myPieCharts){
        this.myPieCharts.resize()
      }
      if(this.myBarCharts){
        this.myBarCharts.resize()
      }
    },
    // 设备在线离线数
    async deviceOnlineList (val) {
      let res = await deviceOnlineStatus(val)
      this.onLinelist = res.data ? res.data : []
    },
    // 最新预警消息
    async queryWarnList () {
      let res = await recordWarningList(this.formWarn)
      this.tableWarnList = res.data?.records
    },
    // 获取项目，工点，监测点，监测数据计数
    async queryProjectCount () {
      let res = await projectCount()
      this.projectCounts = res.data
    }
  },
  created () {
    this.queryList()
    this.queryWarnList()
  },
  mounted () {
    // 拿到表格挂载后的真实DOM
    const table = this.$refs.table
    // 拿到表格中承载数据的div元素
    const divData = table.bodyWrapper
    // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
    setInterval(() => {
      // 元素自增距离顶部1像素
      divData.scrollTop += 1
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
        // 重置table距离顶部距离
        divData.scrollTop = 0
      }
    }, 100)
    // 监测类型占比统计
    this.listMonitorType()
    // 工程所属行业占比统计
    this.listIndustry()
    // 工点所属类型占比统计
    this.listTypePoint()
    // 行政区分布统计
    this.ecityCount()
    // 预警等级占比
    this.warnCountList()
    // 设备在线离线数
    this.deviceOnlineList()
    // 项目，工点，监测点，监测数据计数
    this.queryProjectCount()
    window.addEventListener('resize', this.echartResize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.echartResize)
  }
}
</script>
<style scoped="scoped" lang="less">
  body {
    height: 100%;
    width: 100%;
  }

  .s-map {
    line-height: 20px;
    width: 100%;
    position: relative;
    background-color: #a3ccff;
    height: 100%;

    .map-main {
      height: 56vh;
    }
    .retract {
      height: 84vh;
    }

    .point-map {
      width: 100%;
      height: 100%;
    }

    .s-left {
      width: 24.5%;
      position: absolute;
      left: 1%;
      bottom: 0;
      z-index: 1999;
    }

    .s-center {
      position: absolute;
      left: 26%;
      right: 1%;
      bottom: 0;
      height: 258px;
      z-index: 1999;

      .on-line {
        /deep/ .el-card {
          background-color: rgba(255, 255, 255, 0.7);
          font-size: 16px;
        }

        margin-bottom: 10px;
      }

      /deep/ .el-table {
        td, th {
          padding: 5px !important;
        }
      }
    }

    .s-right {
      width: 20%;
      position: absolute;
      right: 1%;
      top: 100px;
      z-index: 1999;

      .pie-left {
        float: left;
        width: 50%;
      }
    }

    .pie-charts {
      height: 188px;
    }

    .collapse {

      background-color: rgba(255, 255, 255, 1);

      /deep/ .title {
        padding: 5px 10px;
      }

      /deep/ .content {
        padding: 5px 10px !important;
      }
    }

  }

  .s-white {
    color: #FFFFFF;
  }

  .grade-card {
    color: #FFFFFF;
    margin-bottom: 8px;
    font-size: 13px;
    display: inline-block;
    width: 100%;

    /deep/ .el-card__body {
      padding: 8px;
    }

    /deep/ .el-card__body i,
    .el-card__body .grade-box {
      display: inline-block;
      vertical-align: middle;
    }

    .grade-box {
      width: 45%;
    }

    /deep/ .s-progress {
      display: block;
      width: 100%;

      /deep/ .el-progress-bar__outer {
        width: 100%;
      }
    }

    .grade-word {
      font-size: 14px !important;
      width: 63px;
    }

    i {
      padding-right: 7px;
      font-size: 26px !important;
    }
  }
  .warn-info {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    .s-warning {
      font-size: 12px;
      color: white;
    }
  }

  .s-warning {
    font-size: 16px;
    color: #ffa60f;
  }

  .s-warning-not {
    font-size: 16px;
    font-weight: 600;
    color: #24e221;
  }

  .bac-color {
    background-color: #bbbbbb;
  }

  .el-table__body-wrapper {
    overflow-y: hidden;
  }

  .s-top {
    text-align: center;
    height: 50px;
    width: 100%;
    top: 0;
    background-color: rgba(43, 115, 175, 0.8);
    padding: 8px;
    border-radius: 10px;
  }

  .warn-title {
    font-size: 18px;
    font-weight: 600;
    color: white;
  }

  .el-main {
    padding: 0px;
  }

  .el-header {
    padding: 5px;
    background-color: #1990FE;
    border-radius: 10px;
  }

  .el-footer {
    padding: 10px;
    height: 253px !important;
    border-radius: 14px;
    background-color: #1990FE;
  }

  .new-data {
    /deep/ .el-table {
      td, th {
        padding: 2px !important;
      }
    ;
    }
  }

  .local-c {
    color: white;
    font-weight: 600;
    font-size: 20px;
    margin-left: 30px;
  }

  .toggle {
    height: 30px !important;
  }
  .map-btn {
    font-size: 50px;
    position: absolute;
    right: 50%;
    bottom: 30%;
    color: #1990FE;
  }
  .mapBtn {
    bottom: 1%;
  }
</style>
